<template>
	<section>
		<Header />
		<div id="nav">
			<router-link to="/preparation/index">
				<span>手术准备间</span>
			</router-link> 
			
			<router-link to="/preparation/examine">
				<span>准备间核查</span>
			</router-link>
		</div>
        <router-view />
		<Footer />
	</section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Header from '@/components/header/room_header.vue'; 
import Nav from '@/components/nav/room_nav.vue'; 
import Footer from '@/components/footer/Footer.vue';

@Component({
	components: {
		Header,
		Nav,
		Footer
	},
})

export default class Patient extends Vue {
  
}
</script>

<style lang="scss">
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-bottom:40px;
}
#nav {
	height: $navH;
	background:$themecolor;
	color:$color;
	text-align: left;
	a {
		font-weight: bold;
		color: $color;
		height:$navH;
		display:inline-block;
		line-height:$navH;
		padding:0 0.15rem;
		border-right:1px solid $color;
		font-size: 0.14rem;
		font-weight:500;
		&:hover,&.router-link-exact-active {
			color: $themecolor;
			background:$color;
			.icon{
				display:none;
			}
			.icon_hover{
				display:inline-block; 
			}
		}
		.icon{
			margin-right:5px;
			width:20px;
			margin-top: -5px;
		}
		.icon_hover{
			width:20px;
			margin-right:5px;
			margin-top: -5px;
			display:none;
		}
	}
	a:first-child{
		margin-left:0.3rem;
	}
}
</style>
